<template>
    <div class="page">
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path: '/category'}">分类</el-breadcrumb-item>
                <el-breadcrumb-item>{{storeInfo.store_name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="line">
                <img :src="$global.Image.icon_goods_line" />
            </div>
            <!-- goods info -->
            <div class="goods-info td-fss">
                <div class="left">
                    <div class="big-img" @mousemove="mousemove" ref="bigImg">
                        <img v-show="image_base" :src="image_base" />
                        <div class="mouse-box" :style="{height: showMouseBox.height + 'px', width: showMouseBox.width + 'px', top: showMouseBox.top + 'px', left: showMouseBox.left + 'px'}"></div>
                        <div class="show-img">
                            <div class="position-box">
                                <img v-show="image_base" :style="{height: showImgStyle.height + 'px', width: showImgStyle.width + 'px', top: showImgStyle.top + 'px', left: showImgStyle.left + 'px'}" :src="image_base" />
                            </div>
                        </div>
                    </div>
                    <el-carousel trigger="click" height="100px" arrow="always" :autoplay="false">
                        <el-carousel-item v-for="(group, index) in slider_image" :key="index">
                            <ul>
                                <li v-for="(item, idx) in group.list" :key="idx" @mouseover="_showGoodsImage(item)">
                                    <img :src="item" />
                                </li>
                            </ul>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="info td-f1">
                    <div class="name">{{ storeInfo.store_name }}</div>
                    <div class="operating">
                        <div class="info-item">
                            <!-- <label>价格：</label> -->
                            <div style="display:flex">
                                <span class="price">
                                    <small>￥</small>
                                    {{ price }}
                                </span>
                                <!-- <del>￥{{ ot_price }}</del> -->
                                <!-- <div class="good-time-bg-icon" v-if="storeInfo.stock_type == 1">货期：{{storeInfo.stock_time}}天</div> -->
                            </div>
                        </div>
                        <div class="info-items">
                            <div class="itm">
                                <label>原价：</label>
                                <div>{{ ot_price }}</div>
                            </div>
                            <div class="line1"></div>
                            <div class="itm">
                                <label>库存：</label>
                                <div>{{ stock > 10000 ? "10000+" : stock }}</div>
                            </div>
                            <div class="line1"></div>
                            <div class="itm">
                                <label>销量：</label>
                                <div>{{ storeInfo.fsales }}{{ storeInfo.unit_name }}</div>
                            </div>
                        </div>
                        <div class="info-item" v-if="storeInfo.stock_type == 1">
                            <label>发货期：</label>
                            <div class="attribute td-fss td-warp">
                                <span class="td-fcc"  >{{storeInfo.stock_time}}个工作日</span>
                            </div>
                        </div>
                        <!-- 商品属性 -->
                        <div class="info-item" v-for="(item, index) in goodsAttr" :key="index">
                            <label>{{ item.attr_name }}：</label>
                            <div class="attribute td-fss td-warp">
                                <span class="td-fcc" :class="{ active: attr.check }" v-for="(attr, idx) in item.attr_value" :key="idx" @click="_selectGoodsAttr(index, idx)">{{ attr.attr }}</span>
                            </div>
                        </div>
                        <!-- 商品属性 end-->
                        <div class="info-item">
                            <label>数量：</label>
                            <div>
                                <el-input-number v-model="num" size="mini" :min="1" :max="stock" label="描述文字"></el-input-number>
                            </div>
                        </div>
                    </div>
                    <div class="btn-box td-f">
                        <Btn :loading="true" class="btn-r" v-if="isStock" @confirmEvent="_tapBuy">立即购买</Btn>
                        <Btn :loading="true" class="btn-b" v-if="isStock" @confirmEvent="_joinCart">加入购物车</Btn>
                        <Btn class="btn-grey" v-if="!isStock">已售罄</Btn>
                        <div class="collect-btn td-fcc" v-if="isCollect" @click="_setCollect">
                            <img :src="$global.Image.icon_heart" />
                            <span>已喜欢</span>
                        </div>
                        <div class="collect-btn td-fcc" v-else @click="_setCollect">
                            <img :src="$global.Image.icon_heart_grey" />
                            <span>喜欢</span>
                        </div>
                    </div>
                </div>
                <!-- <div class="right">
                    <div class="score td-fbc td-fc">
                        <img class="icon" :src="$global.Image.icon_best" />
                        <div class="tit">好评率({{ replyChance }}%)</div>
                        <v-star class="star-box" small :star="starNum"></v-star>
                        <div class="num">({{ replyCount }})</div>
                    </div>
                </div> -->
            </div>
            <!-- recommend -->
            <div class="recommend-box">
                <div class="tit td-fbc">
                    <div class="td-fsc">
                        <span class="en">RECOMMEND</span>
                        <span class="cn">相关推荐</span>
                    </div>
                    <span class="num">{{ slideIndex }}/{{ goodList.length }}</span>
                </div>
                <div class="slide pos-r">
                    <button type="button" class="el-carousel__arrow el-carousel__arrow--left" @click="prev">
                        <i class="el-icon-arrow-left"></i>
                    </button>
                    <button type="button" class="el-carousel__arrow el-carousel__arrow--right" @click="next">
                        <i class="el-icon-arrow-right"></i>
                    </button>
                    <el-carousel ref="carousel" arrow="never" height="250px" interval="5000" @change="slideChange">
                        <el-carousel-item v-for="(group, index) in goodList" :key="index">
                            <div class="goods-recommend td-fss">
                                <div class="goods-box" v-for="(item, idx) in group.list" :key="idx" @click="goGoods(item)">
                                    <img class="goods-img" :src="item.image" />
                                    <div class="goods-name ellipsis" :title="item.store_name">{{ item.store_name }}</div>
                                    <div class="goods-price td-fbc">
                                        <span>¥{{ item.price }}</span>
                                        <img @click.stop="_showGoodsInfo(item)" :src="$global.Image.icon_cart" />
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="detail">
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="商品介绍" name="first">
                        <div class="border1" v-if="param.length">
                            <div v-for="(item,index) in param" :key="index">
                                <span class="span1">{{item.key}}：</span>
                                <span class="span2">{{item.value}}</span>
                            </div>
                        </div>
                        <div class="content" v-html="goodsContent" v-if="goodsContent"></div>
                        <div class="content" v-else>
                            <div class="nodata">
                                <img :src="$global.Image.noDetail" />
                            </div>
                        </div>
                    </el-tab-pane>
                    <!-- <el-tab-pane :label="'产品评论('+navList[0].num+')'" name="second">
                        <ul class="comment">
                            <li class="td-fss" v-for="(item, index) in reply" :key="index">
                                <img class="avatar" :src="item.avatar" />
                                <div class="member-info">
                                    <div class="tel">{{ item.nickname }}</div>
                                    <div class="attr">规格：{{ item.suk }}</div>
                                    <div class="date">{{ item.add_time }}</div>
                                </div>
                                <div class="comment-info">
                                    <div class="star">
                                        <v-star :star="item.product_score"></v-star>
                                    </div>
                                    <div class="p">{{item.comment}}</div>
                                    <div class="img td-fss td-warp">
                                        <img :src="img" v-for="(img,idx) in item.pics" :key="idx" @click="seeBigImg(item.pics, idx)" />
                                    </div>
                                    <div class="reply" v-if="item.merchant_reply_content">
                                        店家回复：{{item.merchant_reply_content}}
                                    </div>
                                </div>
                            </li>
                            <div class="nodata" v-if="reply.length == 0">
                                <img :src="$global.Image.noEvaluate" />
                            </div>
                        </ul>
                        <div class="pagination-box" v-if="reply.length > 0">
                            <el-pagination background layout="prev, pager, next" @current-change="_handelClickPage" :page-size="where.limit" :total="count"></el-pagination>
                        </div>
                    </el-tab-pane> -->
                </el-tabs>
            </div>
        </div>
        <!-- 查看大图 -->
        <div class="big-img-box" v-if="bigImgShow">
            <img class="img" :src="activeImg" />
            <div class="btn td-fcc">
                <img :src="$global.Image.icon_img_left" @click="seePrev" />
                <img :src="$global.Image.icon_img_right" @click="seeNext" />
            </div>
            <img class="close" :src="$global.Image.icon_img_close" @click="bigImgShow = false" />
        </div>
        <!-- add cart -->
        <v-add-cart ref="addCart"></v-add-cart>
    </div>
</template>

<script>
import Star from "@components/Star";
import { articleDetail } from "@utils/demo.js";
import {
    getProductDetail,
    postCartAdd,
    getCartCount,
    getProductCode,
    storeListApi,
    getReplyConfig,
    getReplyList,
} from "@api/store";
import {
    getCoupon,
    getCollectAdd,
    getCollectDel,
    getUserInfo,
} from "@api/user";
import { mapGetters } from "vuex";
import addCart from "@components/addCart";
let NAME = "GoodsCon";

export default {
    name: NAME,
    components: {
        "v-add-cart": addCart,
        "v-star": Star,
    },
    data() {
        return {
            id: 0,
            ot_price: 0,
            price: 0,
            stock: 0,
            isStock: true,
            num: 1,
            slideIndex: 1,
            activeName: "first",
            goodsContent: "",
            isCollect: false,
            storeInfo: {},
            param:[],
            replyChance: 0,
            replyCount: 0,
            activity: [],
            goodsAttr: [],
            goodsAttrVal: {},
            selectedAttr: [],
            selectedAttrVal: [],
            slider_image: [],
            image_base: "",
            goodList: [],
            // 评论
            reply: [],
            replyData: {},
            navList: [
                { evaluate: "全部", num: 0 },
                { evaluate: "好评", num: 0 },
                { evaluate: "中评", num: 0 },
                { evaluate: "差评", num: 0 },
            ],
            currentActive: 0,
            where: {
                page: 1,
                limit: 20,
            },
            count: 0,
            // see img
            bigImgs: [],
            bigImgShow: false,
            activeImg: "",
            activeImgIndex: 0,
            starNum: "",
            // 放大图片
            showImgStyle: {
                width: 480 * 3,
                height: 480 * 3,
                top: 0,
                left: 0,
                scale: 3,
            },
            showMouseBox: {
                width: 480 / 3,
                height: 480 / 3,
                top: 0,
                left: 0,
            },
        };
    },
    computed: mapGetters(["isLogin"]),
    mounted() {
        this.id = this.$route.params.id;
        window.document.title = "商品详情";
        this.productCon();
        this.getProductReplyCount();
        this.getProductReplyList();
    },
    watch: {
        $route: {
            handler(n) {
                if (n.name === NAME) {
                    this.id = n.params.id;
                    this.storeInfo.slider_image = [];
                    this.productCon();
                }
            },
            // 深度观察监听
            deep: true,
        },
    },
    methods: {
        // 获取商品详情
        productCon() {
            let that = this;
            getProductDetail(that.id)
                .then((res) => {
                    this.storeInfo = res.data.storeInfo;
                    this.param = res.data.param;
                    window.document.title = this.storeInfo.store_name;
                    this.isCollect = this.storeInfo.userCollect;
                    this.image_base = this.storeInfo.image_base;
                    this.formatImg(this.storeInfo.slider_image);
                    that.replyCount = res.data.replyCount;
                    that.replyChance = res.data.replyChance;
                    if (that.replyChance == 100) this.starNum = 5;
                    if (that.replyChance < 100 && that.replyChance >= 80)
                        this.starNum = 4;
                    if (that.replyChance < 80 && that.replyChance >= 50)
                        this.starNum = 3;
                    if (that.replyChance < 50 && that.replyChance >= 20)
                        this.starNum = 2;
                    if (that.replyChance < 20) this.starNum = 1;

                    that.activity = res.data.activity ? res.data.activity : [];
                    this.goodsContent = this.storeInfo.description;
                    this.goodsAttr = res.data.productAttr;
                    this.goodsAttrVal = res.data.productValue;
                    this.ot_price = this.storeInfo.ot_price;
                    this.price = this.storeInfo.price;
                    this.stock = this.storeInfo.stock;
                    this.isStock = !!this.stock;
                    let good_list = res.data.good_list || [];
                    let goodArray = [];
                    let count = Math.ceil(good_list.length / 5);
                    for (let i = 0; i < count; i++) {
                        var list = good_list.slice(i * 5, i * 5 + 5);
                        if (list.length) goodArray.push({ list: list });
                    }
                    this.goodList = goodArray;
                })
                .catch((res) => {
                    that.$dialog.error(res.msg);
                    that.$router.go(-1);
                });
        },
        formatImg(imgs) {
            let num = 6;
            let list = imgs;
            let group = [];
            let count = Math.ceil(list.length / num);
            for (let i = 0; i < count; i++) {
                var item = list.slice(i * num, i * num + num);
                if (item.length) group.push({ list: item });
            }
            this.slider_image = group;
        },
        // 显示大图
        _showGoodsImage(item) {
            this.image_base = item;
        },
        // 选择属性
        _selectGoodsAttr(key1, key2) {
            let goodsAttr = this.goodsAttr[key1].attr_value;
            goodsAttr.map((item) => {
                item.check = false;
            });
            this.goodsAttr[key1].attr_value[key2].check = true;
            this._checkStore();
        },
        // 查看库存/价格
        _checkStore() {
            let data = this.goodsAttr;
            let attr = [];
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].attr_value.length; j++) {
                    if (data[i].attr_value[j].check) {
                        attr.push(data[i].attr_value[j].attr);
                    }
                }
            }
            this.selectedAttr = attr;
            if (this.selectedAttr.length == this.goodsAttr.length) {
                let key = attr.join(",");
                this.selectedAttrVal = this.goodsAttrVal[key];
                this.ot_price = this.selectedAttrVal.ot_price;
                this.price = this.selectedAttrVal.price;
                this.stock = this.selectedAttrVal.stock;
                this.isStock = !!this.stock;
                if (this.isStock) {
                    if (this.num > this.stock) {
                        this.num = this.stock;
                    }
                }
            }
        },
        // 初始化属性选择
        _initGoodsAttr() {
            if (this.goodsAttr && this.goodsAttr.length > 0) {
                let data = this.goodsAttr;
                for (let i = 0; i < data.length; i++) {
                    for (let j = 0; j < data[i].attr_value.length; j++) {
                        data[i].attr_value[j].check = false;
                    }
                }
                this.selectedAttr = [];
            }
            this.ot_price = this.storeInfo.ot_price;
            this.price = this.storeInfo.price;
            this.stock = this.storeInfo.stock;
            this.isStock = !!this.stock;
        },
        goGoods(item) {
            this._toTop();
            this.$router.replace({ path: "/detail/" + item.id });
        },
        _toTop() {
            this.scrollToptimer = setInterval(() => {
                var top =
                    document.body.scrollTop ||
                    document.documentElement.scrollTop;
                var speed = top / 4;
                if (document.body.scrollTop != 0) {
                    document.body.scrollTop -= speed;
                } else {
                    document.documentElement.scrollTop -= speed;
                }
                if (top == 0) {
                    clearInterval(this.scrollToptimer);
                }
            }, 30);
        },
        // 点击加入购物车按钮
        _joinCart(done) {
            this.goCat(0, done);
        },
        // 立即购买；
        _tapBuy(done) {
            this.goCat(1, done);
        },
        // 加入购物车；0=加入购物车、1=直接购买
        goCat(news, done) {
            let that = this;
            if (this.selectedAttr.length != this.goodsAttr.length) {
                that.$dialog.toast({ mes: "请选择商品属性" });
                done();
                return;
            }
            if (that.num == 0) {
                that.$dialog.toast({ mes: "请输入购买数量" });
                done();
                return;
            }
            //如果有属性,没有选择,提示用户选择
            if (parseInt(that.stock) == 0 || that.num > parseInt(that.stock)) {
                that.$dialog.toast({ mes: "产品库存不足!" });
                done();
                return;
            }
            let params = {
                productId: that.id,
                cartNum: that.num,
                new: news,
                uniqueId: that.selectedAttrVal.unique || "",
            };
            postCartAdd(params)
                .then((res) => {
                    done();
                    that._initGoodsAttr();
                    if (news) {
                        that.$router.push({
                            path: "/orderConfirm/" + res.data.cartId,
                        });
                    } else {
                        this.$store.dispatch("CART_NUM");
                        that.$dialog.toast({
                            mes: "添加购物车成功",
                            callback: () => {
                                // that.getCartCount(true);
                            },
                        });
                    }
                })
                .catch((err) => {
                    done();
                    if (err.msg) {
                        that.$dialog.toast({ mes: err.msg });
                    }
                });
        },
        //获取购物车数量
        getCartCount(isAnima) {
            let that = this;
            const isLogin = that.isLogin;
            if (isLogin) {
                getCartCount({ numType: 0 }).then((res) => {
                    that.CartCount = res.data.count;
                    //加入购物车后重置属性
                    if (isAnima) {
                        that.animated = true;
                        setTimeout(function () {
                            that.animated = false;
                        }, 500);
                    }
                });
            }
        },
        //收藏商品
        _setCollect() {
            let that = this,
                id = that.id,
                category = "product";
            if (that.storeInfo.userCollect) {
                getCollectDel(id, category).then(function () {
                    that.storeInfo.userCollect = !that.storeInfo.userCollect;
                    that.isCollect = that.storeInfo.userCollect;
                });
            } else {
                getCollectAdd(id, category).then(function () {
                    that.storeInfo.userCollect = !that.storeInfo.userCollect;
                    that.isCollect = that.storeInfo.userCollect;
                });
            }
        },
        // 切换推荐列表
        prev() {
            this.$refs.carousel.prev();
        },
        next() {
            this.$refs.carousel.next();
        },
        slideChange(index) {
            this.slideIndex = index;
        },
        /**
         * 评论
         */
        // 评论数量
        getProductReplyCount() {
            let that = this;
            getReplyConfig(that.id).then((res) => {
                that.$set(that, "replyData", res.data);
                that.navList[0].num = res.data.sum_count;
                that.navList[1].num = res.data.good_count;
                that.navList[2].num = res.data.in_count;
                that.navList[3].num = res.data.poor_count;
            });
        },
        // 评论列表
        getProductReplyList() {
            let that = this;
            let params = {
                page: that.where.page,
                limit: that.where.limit,
                type: that.currentActive,
            };
            getReplyList(that.id, params).then((res) => {
                that.reply = res.data || [];
            });
        },
        // 分页
        _handelClickPage(val) {
            this.where.page = val;
            this.getProductReplyList();
        },
        // 查看大图
        seeBigImg(imgs, index) {
            this.activeImgIndex = index;
            this.bigImgs = imgs;
            this.activeImg = imgs[index];
            this.bigImgShow = true;
        },
        seeNext() {
            let index = this.activeImgIndex;
            index++;
            if (index > this.bigImgs.length - 1) {
                index = 0;
            }
            this.activeImg = this.bigImgs[index];
            this.activeImgIndex = index;
        },
        seePrev() {
            let index = this.activeImgIndex;
            index--;
            if (index < 0) {
                index = this.bigImgs.length - 1;
            }
            this.activeImg = this.bigImgs[index];
            this.activeImgIndex = index;
        },
        // 放大
        mousemove(e) {
            let data = this.$refs.bigImg.getBoundingClientRect();
            let mouseX1 = e.clientX - data.left;
            let mouseY1 = e.clientY - data.top;
            if (mouseX1 < 80) {
                mouseX1 = 80;
            }
            if (mouseX1 > 400) {
                mouseX1 = 400;
            }
            if (mouseY1 < 80) {
                mouseY1 = 80;
            }
            if (mouseY1 > 400) {
                mouseY1 = 400;
            }
            let scale = this.showImgStyle.scale;
            this.showImgStyle.left = mouseX1 * scale * -1 + 240;
            this.showImgStyle.top = mouseY1 * scale * -1 + 240;
            this.showMouseBox.left = mouseX1 - 80;
            this.showMouseBox.top = mouseY1 - 80;
        },
        // 显示商品信息
        _showGoodsInfo(item) {
            this.$refs.addCart.show(item.id);
        },
    },
    created() {
        this.id = this.$route.params.id;
    },
};
</script>

<style scoped  lang="scss" scoped>
$color: #da213d;
$bgColor: #da213d;
.big-img-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background-color: rgba($color: #000000, $alpha: 0.66);
    .img {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 60vh;
        max-width: 80vw;
    }
    .close {
        position: absolute;
        top: 50px;
        right: 50px;
        width: 30px;
        height: 30px;
        object-fit: contain;
        cursor: pointer;
    }
    .btn {
        position: absolute;
        bottom: 60px;
        width: 100%;
        img {
            width: 36px;
            height: 36px;
            object-fit: contain;
            margin: 0 20px;
            cursor: pointer;
        }
    }
}
.page {
    padding-bottom: 200px;
}

.line {
    margin: 0 0 15px;
    img {
        display: block;
        width: 100%;
    }
}

.goods-info {
    .left {
        .big-img {
            width: 480px;
            height: 480px;
            border: solid #eee 1px;
            background-color: #eee;
            position: relative;
            .mouse-box {
                display: none;
                position: absolute;
                width: 160px;
                height: 160px;
                background-color: rgba($color: #ffffff, $alpha: 0.6);
            }
            img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
            }
            .show-img {
                display: none;
                width: 480px;
                height: 480px;
                position: absolute;
                left: 500px;
                top: 0;
                z-index: 10;
                background-color: #eee;
                box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.2);
                .position-box {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    img {
                        display: block;
                        position: absolute;
                    }
                }
            }
        }
        .big-img:hover {
            .show-img,
            .mouse-box {
                display: block;
            }
        }
        ::v-deep el-carousel__container {
        }
        ::v-deep .el-carousel__arrow {
            border-radius: 0;
            height: 60px;
            width: 24px;
        }
        ::v-deep .el-carousel__arrow--right {
            right: 0;
        }
        ::v-deep .el-carousel__arrow--left {
            left: 0;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            margin: 20px auto;
            width: 410px;
            li {
                width: 60px;
                height: 60px;
                margin-right: 10px;
                box-sizing: border-box;
                border: solid #eee 1px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            li:nth-child(6) {
                margin-right: 0;
            }
            li.active {
                box-sizing: border-box;
                border: solid #014a97 4px;
            }
        }
    }
    .info {
        margin-left: 40px;
        .name {
            font-size: 24px;
            font-weight: 700;
            color: #333333;
            border-bottom: solid #eee 1px;
            word-break: break-all;
            padding-bottom: 30px;
        }
        .operating {
            padding-top: 20px;
            border-bottom: solid #eee 1px;
            min-height: 240px;
            .info-items {
                width: 535px;
                height: 33px;
                background: #fbf7f7;
                border-radius: 4px;
                display: flex;
                padding: 0 16px;
                box-sizing: border-box;
                align-items: center;
                margin-bottom: 25px;
                .line1 {
                    width: 1px;
                    height: 13px;
                    background: #999999;
                    margin: 0 15px;
                }
                .itm {
                    font-size: 12px;
                    color: #666666;
                    display: flex;
                }
            }
            .info-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 20px;
                line-height: 30px;
                .price {
                    font-size: 30px;
                    font-weight: 600;
                    color: $color;
                    padding-right: 20px;
                }
                del {
                    font-size: 14px;
                    color: #999;
                }
                .good-time-bg-icon {
                    width: 118px;
                    height: 32px;
                    font-size: 14px;
                    font-weight: bold;
                    text-align: center;
                    color: #da213d;
                    line-height: 32px;
                    background: url("../assets/second_icon/good_time_bg_icon.png");
                    background-size: 100% 100%;
                }
                label {
                    display: block;
                    width: 60px;
                    font-size: 14px;
                    color: #666;
                }
                > div {
                    font-size: 14px;
                    color: #333;
                    flex: 1;
                }
            }
            .attribute {
                span {
                    height: 30px;
                    border-radius: 4px;
                    border: solid #dbdbdb 1px;
                    background-color: f3f3f3;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    cursor: pointer;
                    padding: 0 20px;
                    height: 32px;
                    border-radius: 2px;
                }
                span:hover {
                    border-color: $bgColor;
                    color: #da213d;
                }
                span.active {
                    border-color: $bgColor;
                    color: #da213d;
                    // background-color: $bgColor;
                }
            }
        }
        .btn-box {
            margin-top: 35px;
        }
    }
    .right {
        padding-top: 60px;
        margin-left: 40px;
        .score {
            padding: 20px 10px;
            box-shadow: 0 5px 10px rgba($color: #000000, $alpha: 0.2);
            border-radius: 6px;
            cursor: pointer;
            .icon {
                display: block;
                width: 46px;
                height: 46px;
            }
            .tit {
                font-size: 14px;
                font-weight: 600;
                color: #014a97;
                margin-top: 40px;
            }
            .star-box {
                margin-top: 10px;
            }
            .num {
                font-size: 16px;
                color: #014a97;
                margin-top: 10px;
            }
        }
    }
}

.btn-r,
.btn-grey,
.btn-b {
    width: 150px;
    height: 57px;
    font-size: 16px;
    margin-right: 20px;
}
.btn-r {
    background-color: #da213d !important;
    font-size: 18px;
    color: #ffffff !important;
}
.btn-b {
    background-color: #da213d !important;
    border: 0 !important;
    font-size: 18px;
    color: #ffffff !important;
}
.collect-btn {
    width: 150px;
    height: 57px;
    font-size: 16px;
    margin-right: 20px;
    border: solid #dbdbdb 1px;
    box-sizing: border-box;
    cursor: pointer;
}

.collect-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 6px;
}

.slide {
    padding: 0 40px;
}

.recommend-box {
    border: 8px solid #ececec;
    height: 360px;
    box-sizing: border-box;
    padding: 30px;
    margin-top: 40px;
    margin-bottom: 60px;
    .tit {
        font-size: 16px;
        color: #999;
        margin-bottom: 20px;
        .en {
            color: #333;
            font-size: 20px;
            font-weight: 600;
            margin-right: 20px;
        }
    }
    .el-carousel__arrow--left {
        left: 0px;
    }
    .el-carousel__arrow--right {
        right: 0px;
    }
    .el-carousel__arrow {
        background: none;
        cursor: pointer;
        top: 90px;
        i {
            font-size: 30px;
            color: #666;
        }
    }
    .el-carousel__indicators--horizontal {
        display: none;
    }
}

.goods-recommend {
    .goods-box {
        box-sizing: border-box;
        width: 158px;
        margin: 0 25px;
    }
    .goods-img {
        width: 100%;
        height: 158px;
        display: block;
        cursor: pointer;
        object-fit: cover;
    }
    .goods-name {
        font-size: 14px;
        color: #333;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        cursor: pointer;
    }
    .goods-price {
        margin-top: 10px;
        span {
            font-size: 14px;
            font-weight: 600;
            color: $color;
        }
        img {
            display: block;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
    }
}

.content {
    padding: 40px 0;
    font-size: 15px;
    line-height: 2;
    ::v-deep p {
        margin: 0 !important;
    }
    ::v-deep img {
        display: block;
        max-width: 100%;
    }
}

.comment {
    li {
        padding: 30px 0;
        border-bottom: solid #eee 1px;
    }
    li:last-child {
        border-bottom: 0;
    }
    .avatar {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 20px;
    }
    .member-info {
        color: #333;
        font-size: 15px;
        margin-right: 40px;
        padding-top: 4px;
        div {
            margin-bottom: 10px;
        }
        .attr,
        .date {
            color: #999;
            font-size: 14px;
        }
    }
    .comment-info {
        .p {
            font-size: 15px;
            color: #333;
            line-height: 2;
            margin-top: 10px;
        }
        .reply {
            color: #999;
            font-size: 15px;
            line-height: 2;
            margin-top: 10px;
        }
    }
    .img {
        margin-top: 10px;
        img {
            width: 80px;
            height: 80px;
            display: block;
            margin-right: 8px;
        }
        img:hover {
            cursor: url("../assets/img/icon_big.png");
        }
    }
}

.detail {
    .border1 {
        margin-top: 40px;
        width: 100%;
        // min-height: 170px;
        border: 1px solid #eaa090;
        padding: 18px 30px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        div {
            padding: 12px 0;
            width: 25%;
            display: flex;
            height: auto;
            .span1 {
              display: flex;
                width: 107px;
                font-size: 14px;
                text-align: left;
                color: #666666;
            }
            .span2 {
              display: flex;
                font-size: 14px;
                color: #333333;
            }
        }
    }
    ::v-deep .el-tabs__nav-scroll {
        border-bottom: 1px solid #dbdbdb;
    }
    ::v-deep .el-tabs--card > .el-tabs__header {
        border-color: #014a97;
    }
    ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border-color: transparent;
    }
    ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
        border-radius: 4px 4px 0 0;
        color: #999;
    }
    ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        padding: 0;
        border-bottom: 3px solid #da213d;
        height: 41px;
        font-size: 18px;
        font-weight: bold;
        color: $color;
    }
}
</style>
